<template>
  <div id="app">
    <div style="padding:30px;">

      <a-row type="flex">
        <a-col flex="200px" >
          <div style="text-align: left;">
            <h1 style="color:red; font-weight: bold;">ChainExplorer</h1>
          </div>
        </a-col>
        <a-col flex="auto">
          <div style="text-align: left;">
            <a-menu v-model="current" mode="horizontal" theme="light">
              <a-menu-item key="Index">
                <router-link to="/"><h3>概览</h3> </router-link>
              </a-menu-item>
              <a-menu-item key="Blocks">
                <router-link to="/blocks"><h3>区块</h3> </router-link>
              </a-menu-item>
              <a-menu-item key="Transactions">
                <router-link to="/tx"><h3>交易</h3> </router-link>
              </a-menu-item>
              <a-menu-item key="Contracts">
                <router-link to="/contracts"><h3>合约</h3></router-link>
              </a-menu-item>
              <a-menu-item key="Wallet">
                <router-link to="/wallet"><h3>钱包</h3></router-link>
              </a-menu-item>
              <a-menu-item key="Accounts" to="/accounts">
                <router-link to="/dashborad"><h3>账户</h3> </router-link>
              </a-menu-item>
              <!-- <a-sub-menu>
                <span slot="title" class="submenu-title-wrapper"
                  ><a-icon type="setting" />Navigation Three - Submenu</span
                >
                <a-menu-item-group title="Item 1">
                  <a-menu-item key="setting:1"> Option 1 </a-menu-item>
                  <a-menu-item key="setting:2"> Option 2 </a-menu-item>
                </a-menu-item-group>
                <a-menu-item-group title="Item 2">
                  <a-menu-item key="setting:3"> Option 3 </a-menu-item>
                  <a-menu-item key="setting:4"> Option 4 </a-menu-item>
                </a-menu-item-group>
              </a-sub-menu> -->
              <!-- <a-menu-item key="alipay">
                <a href="https://antdv.com" target="_blank" rel="noopener noreferrer"
                  >Navigation Four - Link</a
                >
              </a-menu-item> -->
            </a-menu>
          </div>
        </a-col>
        <a-col flex="400px">
          <div style="text-align: right;">
            <a-input-search v-model="searchText" allow-clear placeholder="搜索区块、交易及余额信息" enter-button @search="onSearch" />
          </div>
        </a-col>
      </a-row>



    </div>
    <!-- <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div> -->
    <router-view />
  </div>
</template>
<script>
import Constant from "./utils/Constant";
export default {
  data() {
    return {
      current: ["Index"],
      searchText: null
    };
  },
  created() {
    console.log(this.$eventbus);
    this.$eventbus.$on("selectMenu", (data) => {
      console.log(data);
      if(data.name === "Index") {
        this.current = ['Index'];
      } else if(data.name === "Blocks") {
        this.current = ['Blocks'];
      } else if(data.name === "Transactions") {
        this.current = ['Transactions'];
      } else if(data.name === "Contracts") {
        this.current = ['Contracts'];
      } else if(data.name === "Wallet") {
        this.current = ['Wallet'];
      } else if(data.name === "Accounts") {
        this.current = ['Accounts'];
      }
    })
  },
  methods: {
    onSearch(data) {
      console.log(data)
      if (!data) {
        this.$message.warning("请输入查询内容");
        return;
      }
      let url = Constant.INDEX_SEARCH_URL + "?searchText=" + data;
      this.$http.get(url).then(
        resp => {
          console.log(resp);
          if (resp.data.code === "01") {
            let url = "";
            if(resp.data.result.searchType === "blockNumber") {
              url += "/block?hash=";
            } else if (resp.data.result.searchType === "txHash") {
              url += "/transaction?hash=";
            } else if (resp.data.result.searchType === "blockHash") {
              url += "/block?hash=";
            } else if (resp.data.result.searchType === "balance") {
              url += "/balance?address=";
            } else {
               return;
            }
            this.searchText = null;

            url += resp.data.result.searchText;
            location.href = url;

          } else {
            this.$message.error(resp.data.message);
          }
        },
        err => {
          console.log(err);
        }
      );
    }
  }
};
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}
</style>
